<template>
  <div>
    <mt-header fixed title="历史报警">
      <span slot="left" @click="goback">
        <mt-button>
          <img src="../../assets/fh.png" alt="后退">
        </mt-button>
      </span>
      <span slot="right" @click="selector">
        <mt-button>
          <img src="../../assets/sc.png" alt="报警">
        </mt-button>
      </span>
    </mt-header>
    <div class="waning">
      <ul>
        <li>
          <span>过热警报</span>
          <span>2019年4月3日15:14:10</span>
        </li>
        <li>
          <span>过热警报</span>
          <span>2019年4月3日15:14:10</span>
        </li>
        <li>
          <span>过热警报</span>
          <span>2019年4月3日15:14:10</span>
        </li>
        <li>
          <span>过热警报</span>
          <span>2019年4月3日15:14:10</span>
        </li>
        <li>
          <span>过热警报</span>
          <span>2019年4月3日15:14:10</span>
        </li>
        <li>
          <span>过热警报</span>
          <span>2019年4月3日15:14:10</span>
        </li>
      </ul>
    </div>
    <div class="ceng" v-if="flag" @click="flag=!flag"></div>
    <!-- 阴影 -->
    <transition>
      <div class="shawn" v-show="flag">
        <h2>管理所</h2>
        <select>
          <option value="1">河北大唐张家口热线电力设备开启试试看有没有英才字体</option>
          <option value="2">新区所</option>
          <option value="1">高加索</option>
        </select>
        <h2>站点</h2>
        <select>
          <option value="1">河北大唐张家口热线电力设备开启试试看有没有英才字体</option>
          <option value="2">新区所</option>
          <option value="1">高加索</option>
        </select>
        <h2>机组</h2>
        <div class="crew">
          <button type="button" class="mui-btn mui-btn-primary">蓝色</button>
          <button type="button" class="mui-btn mui-btn-primary">蓝色</button>
          <button type="button" class="mui-btn mui-btn-primary">蓝色</button>
          <button type="button" class="mui-btn mui-btn-primary">蓝色</button>
          <button type="button" class="mui-btn mui-btn-primary">蓝色</button>
          <button type="button" class="mui-btn mui-btn-primary">蓝色</button>
        </div>
        <div class="select-time">
          <h2>查询时间</h2>
          <div class="selce_box">
            <select>
              <option value="1">2019/03/23</option>
              <option value="1">2019/03/24</option>
              <option value="1">2019/03/25</option>
              <option value="1">2019/03/26</option>
              <option value="1">2019/03/27</option>
            </select>
            <span>——</span>
            <select>
              <option value="1">2019/03/23</option>
              <option value="1">2019/03/24</option>
              <option value="1">2019/03/25</option>
              <option value="1">2019/03/26</option>
              <option value="1">2019/03/27</option>
            </select>
          </div>
        </div>

        <div class="sure_button">
          <button type="button" class="mui-btn mui-btn-primary" @click="confirm">确定</button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      flag: false
    };
  },
  methods: {
    goback() {
      // 点击后退
      this.$router.go(-1);
    },
    selector() {
      //报警
      this.flag = !this.flag;
      console.log("报警");
    },
    confirm() {
      //筛选确定
      this.flag = !this.flag;
    }
  }
};
</script>
<style lang="scss" coped>
// 警告条形列表
.waning {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  margin-top: 0.6rem;
  background: #fff;
  z-index: 11;
  ul {
    padding: 0;
    margin: 0;
  }
  ul li {
    list-style: none;
    padding: 0.2rem;
    background: #fff;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
  }
}
// 阴影
.shawn {
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  width: 80%;
  padding: 0.1rem;
  z-index: 13;
  background: #fff;
  box-sizing: border-box;
  text-align: left;
  overflow: hidden;
  h2 {
    padding: 0.08rem 0;
    font-size: 0.22rem;
    font-weight: normal;
  }
  select {
    width: 100%;
    padding: 0.05rem;
    padding-right: 0.15rem;
    border: 1px solid #7e8ec2 !important;
    border-radius: 0.05rem;
    background: url("../../assets/sanjiao.png") no-repeat 98% center;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    margin-bottom: 0.2rem;
    font-family: "Microsoft Yahei";
    option {
      width: 100%;
    }
  }
  .crew {
    margin: 0.2rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    button {
      margin-bottom: 0.1rem;
      width: 30%;
    }
    .mui-btn-primary {
      color: #fff;
      background: #ccd2e8;
      border-radius: 0.06rem;
      border: 1px solid #ccd2e8;
    }
    button:hover,
    button:active {
      background: #7f8fc3;
    }
  }
  .selce_box {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    span {
      padding: 0.04rem;
      color: #7f8fc3;
    }
    select {
      width: 48% !important;
    }
  }
  .sure_button {
    button {
      display: block;
      width: 90%;
      margin: 0 auto;
      background: #7f8fc3;
      border: 1px solid #7f8fc3;
      border-radius: 0.05rem;
    }
  }
}
//黑色背景遮罩 无作用
.ceng {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.6;
  z-index: 12;
}
//动画效果
.v-enter,
.v-leave-to {
  opacity: 0; //透明度,0代表完全透明,1完全不透明
  right: 0;
}
.v-enter-active,
.v-leave-active {
  transition: all 1s ease; // all 所有样式, 0.5秒动画的执行时间,ease变速执行
}
</style>